<!--  -->
<template>
  <div class="">
    <a-card>
      <div class="search-form-wrapper" ref="search">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item>
                <a-select
                  v-model="queryParam.spu_type"
                  allow-clear
                  placeholder="请输入机构名称/机构号进行搜索"
                >
                  <a-select-option value="PT">普通商品</a-select-option>
                  <a-select-option value="CZ">称重商品</a-select-option>
                  <a-select-option value="TC">套餐商品</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item>
                <a-select
                  v-model="queryParam.spu_state"
                  allow-clear
                  placeholder="机构层级"
                >
                  <a-select-option value="1">已上架</a-select-option>
                  <a-select-option value="0">已下架</a-select-option>
                  <a-select-option value="3">草稿</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="24">
              <a-form-item>
                <a-select
                  v-model="queryParam.spu_type"
                  allow-clear
                  placeholder="请输入归属机构名称/机构号进行搜索"
                >
                  <a-select-option value="PT">普通商品</a-select-option>
                  <a-select-option value="CZ">称重商品</a-select-option>
                  <a-select-option value="TC">套餐商品</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="loadData">查询</a-button>
                <a-button
                  style="margin-left: 8px"
                  @click="() => (queryParam = {})"
                >重置</a-button
                >
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
            <a-col :md="6" :sm="24" v-if="advanced">
              <a-form-item>
                <a-select
                  v-model="queryParam.spu_type"
                  allow-clear
                  placeholder="状态"
                >
                  <a-select-option value="PT">普通商品</a-select-option>
                  <a-select-option value="CZ">称重商品</a-select-option>
                  <a-select-option value="TC">套餐商品</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-button type="primary" size="small" style="margin-bottom: 20px">
        机构同步
      </a-button>
      <a-table
        :loading="tableLoading"
        :columns="columns"
        :pagination="pagination"
        @change="(e) => handle(e)"
        :data-source="data"
        :scroll="{ x: 'max-content', y: tableHeight }"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="() => showDrawer(record, text)">编辑</a>
        </span>
      </a-table>
    </a-card>
    <a-drawer
      :width="900"
      placement="right"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
      title="账单明细"
    >
      <a-form-model
        :model="secretForm"
        ref="secretForm"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="机构号" prop="app_id">
          <a-input
            v-model="secretForm.app_id"
            placeholder="请输入"
            allow-clear
          ></a-input>
        </a-form-model-item>
        <a-form-model-item label="机构名称" prop="merchant_code">
          <a-input
            v-model="secretForm.merchant_code"
            placeholder="请输入"
            allow-clear
          ></a-input>
        </a-form-model-item>
        <a-form-model-item label="机构层级" prop="merchant_code">
          <a-input
            v-model="secretForm.merchant_code"
            placeholder="请输入"
            allow-clear
          ></a-input>
        </a-form-model-item>
        <a-form-model-item label="归属机构" prop="merchant_code">
          <a-input
            v-model="secretForm.merchant_code"
            placeholder="请输入"
            allow-clear
          ></a-input>
        </a-form-model-item>
        <a-form-model-item label="机构标识" prop="merchant_code">
          <a-input
            v-model="secretForm.merchant_code"
            placeholder="请输入"
            allow-clear
          ></a-input>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 13, offset: 3 }">
          <a-button type="primary" @click="secretSubmit">保存</a-button>
          <a-button type="primary">取消</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-drawer>
  </div>
</template>

<script>
import { fetchBrandsList } from '@/api/manage'
const columns = [
  {
    title: '机构信息',
    dataIndex: 'spu_name',
    width: 220
  },
  {
    title: '机构层级',
    dataIndex: 'spu_name',
    width: 220
  },
  {
    title: '归属机构',
    dataIndex: 'spu_name',
    width: 220
  },
  {
    title: '状态',
    dataIndex: 'spu_name',
    width: 220
  },
  {
    title: '创建时间',
    dataIndex: 'spu_name',
    width: 220
  },
  {
    title: '操作',
    fixed: 'right',
    scopedSlots: { customRender: 'action' },
    dataIndex: 'action',
    width: 80
  }
]
export default {
  data () {
    return {
      visible: false,
      pagination: {
        current: 1,
        'show-size-changer': true,
        total: 0
      },
      data: [
        { spu_name: 'ss' },
        { spu_name: 'ss' },
        { spu_name: 'ss' },
        { spu_name: 'ss' }
      ],
      tableLoading: false,
      advanced: false,
      queryParam: {},
      tabbarHeight: 420,
      queryParamKey: 'spu_name',
      columns,
      secretForm: {},
      labelCol: { span: 3 },
      wrapperCol: { span: 13 },
      rules: {
        app_id: [{ required: true, message: '请输入APPID' }],
        fieldA: [{ required: true, message: '请输入机构编码' }],
        fieldB: [{ required: true, message: '请输入机构名称' }],
        channelName: [{ required: true, message: '请输入渠道商名称' }]
      }
    }
  },
  computed: {
    hasSelected () {
      return this.selectedRowKeys.length > 0
    },
    tableHeight () {
      return document.body.clientHeight - 220
    }
  },
  components: {},
  methods: {
    afterVisibleChange (val) {
      console.log('visible', val)
    },
    showDrawer () {
      this.visible = true
    },
    onClose () {
      this.visible = false
    },
    loadData () {
      this.tableLoading = true

      fetchBrandsList({ ...this.filter })
        .then((res) => {
          this.tableLoading = false

          console.log(res)
          this.data = res.data.infos
          this.pagination.total = res.data.total
        })
        .catch(() => {})
    },
    handle (v) {
      console.log('daozhegel')

      if (v && v.current) {
        if (this.filter.page_size == v.pageSize) {
          this.pagination.current = v.current
          this.filter.page_no = v.current
        } else {
          this.filter.page_size = v.pageSize
          this.filter.page_no = 1
          this.pagination.current = 1
        }
      } else {
        this.filter.page_no = 1
        this.pagination.current = 1
      }

      this.loadData()
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    }
  }
}
</script>

<style lang="less" scoped>
.empty {
  width: calc(100% + 50px);
  margin-left: -25px;
  height: 12px;
  background: #f7f8fa;
}
.search-box {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 47px;
  margin-bottom: 19px;
  .type-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    .type-item {
      height: 45px;
      line-height: 45px;
      border-bottom: 2px solid #fff;
      padding: 0 20px;
      font-size: 14px;
      cursor: pointer;
    }
    .type-item.active {
      border-bottom: 2px solid #4393F2;
      font-size: 16px;
      font-weight: 500;
      color: #4393F2;
    }
  }
}
.search-form-wrapper {
  background: #f3f4f7;
  padding: 10px 20px 0;
  margin-bottom: 20px;
  padding-bottom: 20px;
  /deep/ .ant-col {
    height: 45px;
  }
  /deep/ .ant-form-item {
    margin: 12px 0;
  }
  /deep/ .ant-btn {
    width: 68px;
    height: 32px;
    margin-top: 12px;
  }
}
</style>
